<template>
	<div>
		<!--新增按钮-->
		<div class="add_btn_wrap">
			<span style="color: #0091EA;cursor: pointer;"><a href="https://www.yunpian.com/entry" target="_blank">短信运营后台</a></span>
		</div>
		<!-- 搜索 -->
		<div class="">
			<div class="down_search_wrap">
				<div class="search_btn_wrap" style="width: 150px;">
					<el-button @click="exportBtn" class="s_btn_up" style="width: 120px;display: block;margin-bottom: 6px;">导出</el-button>
					<el-button @click="searchBtn" type="primary" class="s_btn_down" style="width: 120px;display: block;margin: 0;">查询</el-button>
				</div>
				<div v-for="item in config.search.search_input" class="input_wrap">
					<label class="label" for="">{{item.placeholder}}：</label>
					<el-input :placeholder="'请输入'+item.placeholder" v-model="data.exchanged.search[item.name]" size="small" clearable>
					</el-input>
				</div>
				<div class="select_input_wrap" v-for="items in config.search.search_select">
					<label class="label" for="">{{items.placeholder}}：</label>
					<el-select v-model="data.exchanged.search[items.name]" :placeholder="items.placeholder" :multiple="items.multiple" :filterable="items.filterable" size="small" clearable>
						<el-option v-for="(item, index) in data.received.search[items.name]" :key="item.index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</div>
				<div class="select_input_wrap">
					<label class="label" for="">模板ID：</label>
					<el-select v-model="data.exchanged.search.templateId" placeholder="请选择模板ID" size="small" clearable>
						<el-option v-for="item in data.received.search.templateId" :key="item" :label="item" :value="item"></el-option>
					</el-select>
				</div>
				<!--地址三级联动-->
				<div class="input_wrap">
					<label class="label" for="">地址：</label>
					<VDistpicker :province="data.exchanged.search.province" :city="data.exchanged.search.city" :area="data.exchanged.search.area" @province="onChangeProvince3" @city="onChangeCity3" @area="onChangeArea3">
					</VDistpicker>
				</div>
				<!-- 日期时间范围 -->
				<div class="riqi_wrap">
					<label class="label">时间：</label>
					<el-date-picker @change="timeChange" v-if="config.search.date" v-for="itemDate in config.search.date" v-model="data.exchanged.date[itemDate.name]" :type="itemDate.type" :range-separator="itemDate.separator" :size="itemDate.size" :start-placeholder="itemDate.placeholder+'开始'" :end-placeholder="itemDate.placeholder+'结束'" align="right" value-format="yyyy-MM-dd HH:mm" clearable placeholder="选择日期">
					</el-date-picker>
				</div>
			</div>
		</div>
		<!-- 内容 -->
		<div class="">
			<el-table :data="data.received.table" stripe="stripe" :border='true' element-loading-text="拼命加载中" style="width: 100%">
				<el-table-column type="index" width="50"></el-table-column>
				<template v-for="i in config.table.show.items.length">
					<el-table-column :sortable="config.table.sort[config.table.show.prop[i-1]]" :label="config.table.show.items[i-1]" :prop="config.table.show.prop[i-1]" :width="config.table.show.width[i-1]"></el-table-column>
				</template>
			</el-table>
		</div>
		<!-- 分页-->
		<div class="page_wrap">
			<page-model :data="data" :config="config.page" :dataCount="data.received.count" :limit="data.exchanged.search.limit" :currentPage="data.exchanged.search.page"></page-model>
		</div>
	</div>
</template>
<script>
	import http from '@/assets/js/http.js'
	import pageModel from 'components/Common/page-model.vue'
	import VDistpicker from 'v-distpicker'
	
	export default {
		components: {
			pageModel,
			VDistpicker
		},
		data() {
			return {
				sendCode: {
					dialogFormVisible: false,
					form: {
						name: 'slsl'
					}
				},
				Add: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							express_number: '',
							pickup_code: '',
							iphone: '',
							express_company: '',
						},
						selectData: {
							express_company: [{
								label: '圆通快递',
								value: 1
							}, {
								label: '韵达快递',
								value: 2
							}],
						}
					},
					config: {
						uploadUrl: '',
						domain: '',
						title: '录入包裹',
						form: {
							input: [{
									prop: 'express_number',
									label: '运单号',
									placeholder: '请输入运单号',
								},
								{
									prop: 'pickup_code',
									label: '取件码',
									placeholder: '请输入取件码',
								},
								{
									prop: 'iphone',
									label: '手机号',
									placeholder: '请输入手机号',
								}
							],
							select: [{
								label: '快递公司',
								prop: 'express_company',
								placeholder: '请选择快递公司',
							}]
						},
						rules: {
							Remark: [{
								required: true,
								message: '请输入账户变动详情 备注'
							}]
						}
					}
				},
				Edit: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							express_number: '',
							pickup_code: '',
							iphone: '',
							express_company: '',
						},
						selectData: {
							express_company: [{
								label: '圆通快递',
								value: 1
							}, {
								label: '韵达快递',
								value: 2
							}],
						}
					},
					config: {
						uploadUrl: '',
						domain: '',
						title: '修改包裹',
						form: {
							input: [{
									prop: 'express_number',
									label: '运单号',
									placeholder: '请输入运单号',
								},
								{
									prop: 'pickup_code',
									label: '取件码',
									placeholder: '请输入取件码',
								},
								{
									prop: 'iphone',
									label: '手机号',
									placeholder: '请输入手机号',
								}
							],
							select: [{
								label: '快递公司',
								prop: 'express_company',
								placeholder: '请选择快递公司',
							}]
						},
						rules: {

						}
					}
				},
				config: {
					baseApi: 'AdminApi/userList/List',
					search: {
						search_input: [{
							name: 'mobile',
							placeholder: '客户电话',
							size: 'large'
						}],
						search_select: [
							{
								name: 'siteId',
								placeholder: '站点',
								size: 'large',
								multiple: false,
								filterable: true,
							},
							{
								name: 'result',
								placeholder: '发送结果',
								size: 'large',
								multiple: false,
								filterable: false,
							}
						],
						date: [{
							name: 'time',
							type: 'datetimerange',
							separator: '-',
							size: 'small',
							placeholder: '-',
						}]
					},
					table: {
						noGroup: false,
						checkbox: false,
						status: false,
						photo: true,
						sort: {
							CreateDate: 'custom'
						},
						show: {
							prop: [
								'siteName',
								'templateId',
								'mobile',
								'content',
								'date',
								'resultText',
							],
							items: [
								'站点',
								'模板id',
								'客户电话',
								'短信内容',
								'发送时间',
								'发送结果',
							],
							width: []
						},
					},
					page: {
						limits: [5, 10, 20, 50, 100],
						layout: 'total, sizes, prev, pager, next, jumper'
					},

				},
				data: {
					received: {
						table: [],
						count: 10,
						search: {
							siteId: [],
							result: [{
								name: '全部',
								id: ''
							},{
								name: '正在发送',
								id: 1
							},{
								name: '发送成功',
								id: 2
							},{
								name: '发送失败',
								id: 3
							}],
							templateId: []
						}
					},
					exchanged: {
						search: {
							limit: 10,
							page: 1,
							province: '',
							city: '',
							area: '',
							siteId: '',
							result: '',
							templateId: '',
							mobile: '',
							start: '',
							end: '',
						},
						multipleSelection: [],
						isDelete: 0,
						date: {
							time: '',
						}
					}
				}
			}
		},
		created() {
			this.tableData();
			this.selectData();
			// 延迟绑定监听
			this.$watch('data.exchanged.search.limit', {
				deep: true,
				handler: function() {
					this.tableData()
				}
			})
			this.$watch('data.exchanged.search.page', {
				deep: true,
				handler: function() {
					_g.openGlobalLoading()
					this.tableData()
				}
			})
		},
		methods: {
			tableData() {
				let obj = this.data.exchanged.search;
				let page = obj.page - 1;
				this.apiGet("/api/backend/base/sms/list?page=" + page + "&count=" + obj.limit + "&province=" + obj.province + "&city=" + obj.city +
						"&area=" + obj.area + "&siteId=" + obj.siteId + "&result=" + obj.result + "&templateId=" + obj.templateId + "&mobile=" + obj.mobile +
						"&start=" + obj.start + "&end=" + obj.end)
					.then(res => {
						if(res.code == 200) {
							res.data.items.map(i => {
								//0未知 1正在发送 2发送成功 3发送失败
								switch(i.result) {
									case 0:
										i.resultText = '0未知'
										break;
									case 1:
										i.resultText = '正在发送'
										break;
									case 2:
										i.resultText = '发送成功'
										break;
									case 3:
										i.resultText = '发送失败'
										break;
									default:
										break;
								}
							})
							this.data.received.table = res.data.items
							this.data.received.count = res.data.count
							_g.closeGlobalLoading();
						}
					})
			},
			commitAdd() {
				console.log('this.Add.data.form', this.Add.data.form)
			},
			//导出按钮
			exportBtn() {
				let obj = this.data.exchanged.search;
				window.location.href = axios.defaults.baseURL+"/api/backend/base/sms/export?&province=" + obj.province + "&city=" + obj.city +
						"&area=" + obj.area + "&siteId=" + obj.siteId + "&result=" + obj.result + "&templateId=" + obj.templateId + "&mobile=" + obj.mobile +
						"&start=" + obj.start + "&end=" + obj.end
			},
			searchBtn() {
				this.tableData();
			},
			onChangeProvince3(data) {
				if(data.value == '省') {
					this.data.exchanged.search.province = ''
				} else {
					this.data.exchanged.search.province = data.value;
				}
			},
			onChangeCity3(data) {
				this.data.exchanged.search.city = data.value;
			},
			onChangeArea3(data) {
				this.data.exchanged.search.area = data.value;
			},
			//获取下拉框数据
			selectData() {
				let that = this;
				//站点字典
				this.apiGet("/api/dict/site/list", null).then(res => {
					if(res.code == 200) {
						that.data.received.search.siteId = res.data.sites
					}
				})
				//模板id字典
				this.apiGet("/api/dict/sms-template/list", null).then(res => {
					if(res.code == 200) {
						that.data.received.search.templateId = res.data.templates
					}
				})
			},
			//搜索框时间选择
			timeChange() {
				if(this.data.exchanged.date.time) {
					this.data.exchanged.search.start = this.data.exchanged.date.time[0]
					this.data.exchanged.search.end = this.data.exchanged.date.time[1]
				} else {
					this.data.exchanged.search.start = ''
					this.data.exchanged.search.end = ''
				}
			},
		},

		mixins: [http]
	}
</script>
<style scoped>
	.add_btn_wrap {
		background: rgba(250, 250, 250, 1);
		padding: 10px 30px;
		text-align: right;
	}
	
	.page_wrap {
		text-align: center;
		padding: 30px;
	}
</style>
<style type="text/css">
	.distpicker-address-wrapper {
		line-height: 46px;
		display: inline-block;
	}
	
	.distpicker-address-wrapper select {
		padding: 0;
		height: 32px;
		font-size: 14px;
		line-height: 1;
	}
	.el-message-box__header {
		background: rgba(24, 144, 255, 1);
	}
	
	.el-message-box__title {
		color: #fff;
	}
	
	.el-message-box__headerbtn .el-message-box__close {
		color: #fff;
	}
</style>